<template>
  <div class="wrapper">
    <Header
      @handleNextClick="handleNextClick"
      :headline="'新建收货地址'"
      :next="'保存'"
    />
    <div class="content">
      <div class="content__item">
        所在城市：<input
          type="text"
          placeholder="如北京市"
          v-model="city"
          class="content__item__inp"
        />
      </div>
      <div class="content__item">
        小区/大厦/学校：<input
          type="text"
          placeholder="如理工大学国防科技园"
          class="content__item__inp"
          v-model="department"
        />
      </div>
      <div class="content__item">
        楼号-门牌号：<input
          type="text"
          placeholder="A号楼B层"
          class="content__item__inp"
          v-model="houseNumber"
        />
      </div>
      <div class="content__item">
        收货人：<input
          type="text"
          placeholder="请填写收货人的姓名"
          class="content__item__inp"
          v-model="name"
        />
      </div>
      <div class="content__item">
        联系电话：<input
          type="text"
          placeholder="请填写收货手机号"
          class="content__item__inp"
          v-model="phone"
        />
      </div>
    </div>
  </div>
  <Toast v-if="show" :message="toastMessage" />
</template>

<script>
import Header from "./Header.vue";
import { ref } from "vue";
import { useStore } from "vuex";
import { useToastEffect } from "../../components/toast/Toast.vue";
import Toast from "../../components/toast/Toast.vue";
import { post } from "../../utils/request";
import router from "@/router";
/**
 * 新建收货地址
 */
const useClickEffect = (ToastShow) => {
  const store = useStore();
  let city = ref("");
  let department = ref("");
  let houseNumber = ref("");
  let name = ref("");
  let phone = ref("");
  //保存事件
  const handleNextClick = async () => {
    if (
      city.value &&
      department.value &&
      houseNumber.value &&
      name.value &&
      phone.value
    ) {
      /**
       * post请求
       */
      const { data } = await post("api/user/address", {
        city: city.value,
        department: department.value,
        houseNumber: houseNumber.value,
        name: name.value,
        phone: phone.value,
      });

      if (data.errno === 0) {
        ToastShow("保存成功");
        router.back();
      }
    } else {
      ToastShow("请填写完整");
    }
  };
  return { handleNextClick, city, department, houseNumber, name, phone };
};
export default {
  name: "setAddress",
  components: { Header, Toast },
  setup() {
    const { ToastShow, toastMessage, show } = useToastEffect();
    const { handleNextClick, city, department, houseNumber, name, phone } =
      useClickEffect(ToastShow);
    return {
      handleNextClick,
      city,
      department,
      houseNumber,
      name,
      phone,
      toastMessage,
      show,
    };
  },
};
</script>
<style lang="scss" scoped>
@import "../../style/viriables.scss";
.wrapper {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: $color-f8f8;
}
.content {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 0.12rem;
  padding: 0 0.18rem;
  background-color: $color-fff;

  &__item {
    display: flex;
    font-size: 0.14rem;
    color: $color-666;
    width: 100%;
    height: 0.44rem;
    line-height: 0.44rem;
    border-bottom: 0.01rem solid $content-bgColor;
    &__inp {
      flex: 1;
      outline: none;
      border: none;
    }
    input::placeholder {
      color: $color-999;
    }
    &:last-child {
      border: none;
    }
  }
}
</style>